const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //分离CSS
const path = require('path');
const tool = require('./tool.js') //获得工具类
const CleanWebpackPlugin = require('clean-webpack-plugin')
const baseWebpackConfig = require('./webpack.config.js');

module.exports = (siteName) => {
    let config = merge(baseWebpackConfig(siteName), {
        mode: 'production', // production
        output: {
            filename: 'js/[name].js', //[name]默认生成的都叫main.js（如果是不指定键值对的方式）
            path: path.resolve('./dist')
        },
        module: {
            rules: [{
                //发布模式
                test: /\.less$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../', //css打包后引入图片的路径
                        }
                    },
                    'css-loader',
                    // tool.postcssConfig,
                    'less-loader'
                ]
            }]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/main.css' //按照模板要求配置路径
            }),
            new CleanWebpackPlugin(['./dist'], {
                root: path.resolve('./')
            }),
            ...tool.getFiles(siteName).map(file => {
                return new HtmlWebpackPlugin({
                    template: file.path,
                    filename: file.filename + '.html',
                    chunksSortMode: 'manual', //将chunks按引入的顺序排序
                    inject: true //所有JavaScript资源插入到body元素的底部
                })
            })
        ],
        devtool: '#eval-source-map'
    });
    return config;
}